<template>
  <su-fixed alway :bgStyles="{ background: '#fff' }" :val="0" noNav opacity :placeholder="false">
    <su-status-bar />
    <view class="ui-bar ss-p-x-20" :style="[{ height: compHeight + 'px', display: state.tabOpacityVal }]">
      <view class="header-top" :style="{ height: compHeight / 2 + 'px' }">
        <!-- 左 -->
        <!-- <view class="icon-box ss-flex">
          <view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
            <text class="sicon-back" v-if="hasHistory" />
            <text class="sicon-home" v-else />
          </view>
          <view class="line"></view>
          <view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight">
            <text class="sicon-more" />
          </view>
        </view>
        <view class="title-box" :style="[{ opacity: state.tabOpacityVal }]">
          <view class="img"><image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250514/0cea735d88427f96a96957f4e4af6ade.png"></image></view>
          <view class="title" :style="[{ titleStyle }]">{{ title }}</view>
        </view> -->
        <view class="header-box" :style="[{ display: state.tabOpacityVal }]">
          <view class="img"><image :src="sheep.$url.cdn(state.avatar || '/storage/storelevel/20250410/54cf8f23d18011b35a5d21159bfb31f9.png')"></image></view>
          <view class="title ss-line-1" :style="[titleStyle]">{{ title }}</view>
        </view>

        <!-- #ifdef MP -->
        <!-- 胶囊宽高 -->
        <view :style="[capsuleStyle]"></view>
        <!-- #endif -->
      </view>

    </view>
  </su-fixed>
</template>

<script setup>
import { reactive, computed, watch, nextTick } from 'vue';
import { onPageScroll } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import throttle from '@/sheep/helper/throttle.js';
import { showMenuTools } from '@/sheep/hooks/useModal';

const sys_statusBar = sheep.$platform.device.statusBarHeight;
const sys_navBar = sheep.$platform.navbar;
const compHeight = (sys_navBar - sys_statusBar)

// 小程序胶囊宽高
const capsuleStyle = {
  width: sheep.$platform.capsule.width + 'px',
  height: sheep.$platform.capsule.height + 'px',
};

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  thumb: {
    type: String,
    default: '',
  },
  titleStyle: {
    type: Object,
    default() {},
  },
});

watch(() => props.thumb, (newVal) => {
  nextTick(() => {
    console.log(newVal,'newVal=sssss=')
    state.avatar = newVal
  })
},
{ deep: true, immediate: true })


const state = reactive({
  tabOpacityVal: 'none',
  curTab: 'goods',
  avatar: props.thumb

});
const emits = defineEmits(['clickLeft']);
const hasHistory = sheep.$router.hasHistory();

function onClickLeft() {
  if (hasHistory) {
    sheep.$router.back();
  } else {
    sheep.$router.go('/pages/index/index');
  }
  emits('clickLeft');
}

function onClickRight() {
  showMenuTools();
}

let cardInfo = {
  comment: 0,
  content: 0,
  recommend: 0,
};

function getCommentCardNode() {
  return new Promise((res, rej) => {
    uni.createSelectorQuery()
      .select('.detail-comment-selector')
      .boundingClientRect((data) => {
        if (data) {
          cardInfo.comment = data.top;
          res(data);
        } else {
          res(null);
        }
      })
      .select('.detail-content-selector')
      .boundingClientRect((data) => {
        if (data) {
          cardInfo.content = data.top;
          res(data);
        } else {
          res(null);
        }
      })
      .select('.detail-recommend-selector')
      .boundingClientRect((data) => {
        if (data) {
          cardInfo.recommend = data.top;
          res(data);
        } else {
          res(null);
        }
      })
      .exec();
  });
}

function onTab(tab) {
  let scrollTop = 0;
  if (tab.value === 'comment') {
    scrollTop = cardInfo.comment - compHeight + 1;
  } else if (tab.value === 'detail') {
    scrollTop = cardInfo.content - compHeight + 1;
  } else if (tab.value === 'recommend') {
    scrollTop = cardInfo.recommend - compHeight + 1;
  }
  uni.pageScrollTo({
    scrollTop,
    duration: 200,
  });
}

onPageScroll((e) => {
  state.tabOpacityVal = e.scrollTop > compHeight ? 'block' : 'none';

  console.log(e,'滚动=')
  if (cardInfo.comment === 0) {
    throttle(() => {
      getCommentCardNode();
    }, 50);
  }

  if (e.scrollTop < cardInfo.comment - compHeight) {
    state.curTab = 'goods';
  } else if (
    e.scrollTop >= cardInfo.comment - compHeight &&
    e.scrollTop <= cardInfo.content - compHeight
  ) {
    state.curTab = 'comment';
  } else if (
    e.scrollTop >= cardInfo.content - compHeight &&
    e.scrollTop <= cardInfo.recommend - compHeight
  ) {
    state.curTab = 'detail';
  } else {
    state.curTab = 'recommend';
  }
});
</script>

<style lang="scss" scoped>
@import '../style/detail-navbar.scss'
</style>
